<template>
  <div :class="style[position]" >

  </div>
</template>

<script>
export default {
    name:'BackImage',
    data(){
        return{
            position:0,
            style:['img','right']
        }
    },
    methods:{
       
    },
    mounted() {
        this.$bus.$on('changePosition',(data)=>{
            this.position=data;
        })
    },
    beforeDestroy(){
        this.$bus.$off('changePosition')
    }
}
</script>

<style scoped>
    .img{
        height:100%;
        width:50%;
        border-radius: 20px 0 0 20px;
        /* background-color:white; */
        position:absolute;
        background:url('../../../assets/信息安全.jpg');
        background-size: cover;
        background-position: center center;
        transition:all 0.5s;
        z-index: 100;
    }
    .right{
        height:100%;
        width:50%;
        border-radius: 0px 20px 20px 0;
        /* background-color:white; */
        position:absolute;
        background:url('../../../assets/信息安全.jpg');
        background-size: cover;
        background-position: center center;
        transition:all 0.5s;
        transform: translate(100%);
        z-index: 100;
    }
   
</style>